<template>
    <view class="order-item" v-if="data">
        <view class="order-item-top">
            <view class="flex-v-c supplier-box" @click="goSupplierPage">
                <text
                    class="checkbox"
                    v-if="(data.State == 0 || data.State == 12) && swiperIndex == 1"
                    :class="checkIds.indexOf(data.ID) > -1 ? 'checkbox-active' : ''"
                    @click.stop="check(data.ID)"></text>
                <text class="iconfont icon-dianpu"></text>
                <text class="supplier-name">{{ data.SupplierName || "总部" }}</text>
                <text class="iconfont icon-xiayiji"></text>
            </view>
        </view>
        <view class="order-item-main" @click="goOrderDetail">
            <view
                class="order-item-imgs"
                v-if="data.DetailList && !getAppSet().isHideImg && data.DetailList.length > 1">
                <view class="img-item" v-for="(item, index) in data.DetailList.slice(0, 4)" :key="index">
                    <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    <text class="text-num">x{{ item.Amount }}{{ item.UnitName ? item.UnitName : item.RatioUnit }}</text>
                </view>
            </view>
            <view
                class="order-item-imgs"
                v-if="data.DetailList && !getAppSet().isHideImg && data.DetailList.length == 1">
                <view class="img-item" v-for="(item, index) in data.DetailList" :key="index">
                    <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    <text class="text-num">x{{ item.Amount }}{{ item.UnitName ? item.UnitName : item.RatioUnit }}</text>
                </view>
                <view class="order-item-name" v-for="(item, index) in data.DetailList">{{ item.Name }}</view>
            </view>
            <view class="order-item-imgs" v-if="data.DetailList && getAppSet().isHideImg">
                <text class="pro-text">{{ data.DetailList[0].Name }}</text>
            </view>
            <view class="right">
                <view class="right-box">
                    <text class="right-box-text" v-if="data.DetailList.length > 4">···</text>
                    <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                </view>
                <!-- <text class="order-desc">({{data.DetailList.length}}种{{getTotalNum()}}件)</text> -->
            </view>
        </view>
        <view class="order-item-price">
            <view class="kind"
                ><text>共{{ data.DetailList.length }}种</text><text v-show="false">数量：{{ getTotalNum() }}</text>
            </view>
            <view class="order-price">
                <text>总计:</text>
                <text class="price-text">¥{{ getTotalPrice() }}</text>
            </view>
        </view>
        <view class="order-item-bottom">
            <order-state-menu :item="data"></order-state-menu>
        </view>
        <view class="order-state">{{ data.StateName }}</view>
    </view>
</template>

<script>
import orderStateMenu from "@/components/supplier/order/order-state-menu.vue"
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
        checkIds: {
            type: String,
            default: "",
        },
        swiperIndex: {
            type: Number,
            default: -1,
        },
    },
    components: {
        orderStateMenu,
    },
    data() {
        return {}
    },
    methods: {
        check(id) {
            this.$emit("toggle", id)
        },
        getBtnText() {
            //获取订单状态对应按钮文字
            let btnText = ""
            switch (this.data.State) {
                case 1:
                    btnText = "再次购买"
                    break
                case 2:
                    btnText = "立即支付"
                    break
                case 3:
                    btnText = "再次购买"
                    break
                default:
                    btnText = "再次购买"
                    break
            }
            return btnText
        },
        goSupplierPage() {
            if (this.data.SupplierId) {
                this.easyGoTo("/pages_supplier/packet/supplier/detail?id=" + this.data.SupplierId)
            }
        },
        goOrderDetail() {
            this.easyGoTo("/pages_supplier/packet/order/orderDetail?id=" + this.data.OrderId)
        },
        getTotalNum() {
            let num = 0
            this.data.DetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getTotalPrice() {
            let price = this.data.PriceSum - this.data.PolicyDiscount - this.data.CouponMoney
            if (price < 0) {
                return 0.0
            } else {
                return price.toFixed(2)
            }
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";

.right {
    .right-box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;

        .right-box-text {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding-right: 24rpx;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            font-weight: 500;
            letter-spacing: 2rpx;
        }
    }

    .order-desc {
        color: $app-color-text-tip;
    }
}

.pro-text {
    font-size: $font-size-28;
    font-weight: 600;
}
</style>
